<template>
	<view>
		<u-navbar title="列表" :autoBack="true" bgColor="rgb(248,248,248)" :rightText="rightText"
			@rightClick="rightClick">
		</u-navbar>
		<view style="margin-top: 100rpx;">
			<view v-for="(item,index) in list"  >
				<view class="box">
					<view @click="check(item,index)">
						<aip-checkbox :key="keys" :check="item.checked" v-if="isEdit"></aip-checkbox>
					</view>
					<view class="item">{{item.name}}</view>
				</view>
			</view>
			<view class="fixed-bottom" v-if="isEdit">
				<u-button size="small" shape="circle" style="width: 100px;" type="primary" :text="selectTxt"
					@click="checkAll"></u-button>
				<u-button size="small" shape="circle" style="width: 100px;" type="error" text="删除"
					@click="deleteCheck"></u-button>
			</view>
			<u-modal :show="deleteConfirmShow" :showCancelButton="true" title="提示" content="请确认是否删除?"
				@confirm="confirmDelete" ref="uModal" @cancel="deleteConfirmShow=false"></u-modal>
		</view>
	</view>
</template>

<script>
	import checkbox from '@/components/aip-checkbox/aip-checkbox.vue'
	export default {
		components: {
			'aip-checkbox': checkbox
		},
		data() {
			return {
				keys: 0,
				checkBtnHeight: 0,
				deleteConfirmShow: false,
				selectTxt: '全选',
				rightText: '编辑',
				isEdit: false,
				list: [{'name':1},{'name':2},{'name':3},{'name':4},{'name':5},{'name':6}],
			}
		},
		onLoad() {

		},
		methods: {
			check(item, index) {
				item.checked = !item.checked;
				this.keys = this.keys == 1 ? 0 : 1;
			},
			rightClick() {
				if (this.rightText == '编辑') {
					this.isEdit = true
					this.rightText = "取消"
				} else {
					this.isEdit = false
					this.rightText = "编辑"
				}
			},
			checkAll() {
				if (this.selectTxt == '全选') {
					this.list.forEach((item) => {
						item.checked = true
					})
					this.selectTxt = '取消全选'
				} else {
					this.list.forEach((item) => {
						item.checked = false
					})
					this.selectTxt = '全选'
				}
			},
			deleteCheck() {
				const idx = this.list.findIndex(item => item.checked == true);
				if (idx == -1) {
					this.$refs.uToast.show({
						type: 'warnning',
						message: "请先选中删除的数据"
					})
					return
				}
				this.deleteConfirmShow = true
			},
			confirmDelete() {
				this.deleteConfirmShow = false
				for (var i = 0; i < this.list.length; i++) {
					if (this.list[i].checked) {
						this.list.splice(i, 1);
						i--;
					}
				}
				this.$refs.uToast.show({
					type: 'success',
					message: "删除成功"
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.btn {
		margin-top: 10px;
		width: 50px;
		position: absolute;
		left: 125px;
	}

	.fixed-bottom {
		position: fixed;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 1;
		margin-bottom: 6;
		display: flex;
		flex-flow: row;
		justify-content: space-between;
		align-items: center;
		margin: 10px;
	}

	.item {
		width: 600rpx;
		height: 140rpx;
		border-radius: 10px;
		background: #cfcfcf;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.box{
		display: flex;
		align-items: center;
		margin: 20rpx;
	}
</style>